---
title: "Place Items"
# description: "Utilities for controlling how items are justified and aligned at the same time."
description: "用于同时控制项目如何在水平和垂直方向对齐的功能类。"
---

import plugin from 'tailwindcss/lib/plugins/placeItems'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

## Auto

<!-- Use `place-items-auto` to place grid items automatically in their grid areas: -->
使用 `place-items-auto` 将网格项目自动放置在其网格区域：

```html indigo
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-auto h-48">
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">1</div>
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">2</div>
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">3</div>
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">4</div>
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">5</div>
    <div class="rounded-md bg-indigo-500 text-white text-2xl font-extrabold flex items-center justify-center py-3">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-auto** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Start

<!-- Use `place-items-start` to place grid items on the start of their grid areas on both axis: -->
使用 `place-items-start` 将网格项目放置在网格区域的两个轴上的起点：

```html emerald
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-start h-48">
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-emerald-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-start** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## End

<!-- Use `place-items-end` to place grid items on the end of their grid areas on both axis: -->
使用 `place-items-end` 将网格项目放置在网格区域的两个轴上的终点：

```html amber
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-end h-48">
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-amber-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-end** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Center

<!-- Use `place-items-center` to place grid items on the center of their grid areas on both axis: -->
使用 `place-items-center` 将网格项目放置在网格区域的两个轴上的中心：

```html purple
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-center h-48">
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">1</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">2</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">3</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">4</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">5</div>
    <div class="rounded-md bg-purple-500 text-white text-2xl font-extrabold flex items-center justify-center h-16 w-16">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-center** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## Stretch

<!-- Use `place-items-stretch` to stretch items along their grid areas on both axis: -->
使用 `place-items-stretch` 将网格项目沿着网格区域的两个轴拉伸：

```html lightBlue
<template preview>
  <div class="grid grid-cols-3 gap-2 place-items-stretch h-48">
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">1</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">2</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">3</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">4</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">5</div>
    <div class="rounded-md bg-light-blue-500 text-white text-2xl font-extrabold flex items-center justify-center">6</div>
  </div>
</template>

<div class="grid grid-cols-3 gap-2 **place-items-stretch** h-48 ...">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
```

## 响应式

<!-- To place items at a specific breakpoint, add a `{screen}:` prefix to any existing `place-items` utility. For example, use `md:place-items-center` to apply the `place-items-center` utility at only medium screen sizes and above. -->
要在特定的断点放置项目，可以在任何现有的 `place-items` 功能类前添加 `{screen}:` 前缀。例如，使用 `md:place-items-center` 来仅在中等尺寸及以上的屏幕应用 `place-items-center` 功能。

```html
<div class="place-items-start md:place-items-center">
  <!-- ... -->
</div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看 [响应式设计](/docs/responsive-design) 文档。

## 定制

### 变体

<Variants plugin="placeItems" name="place-items" />

### 禁用

<Disabling plugin="placeItems" name="place-items" />
